<template>
    <div>
        <el-row class="wathdra_record">
            <el-col :span="24" class="form-title">
                <div class="form-title-con">
                    角色管理
                    &#X3000;
                    <el-button type="primary" size="small" @click="addRole()">新增角色</el-button>
                </div>
            </el-col>
        </el-row>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column type="index" label="序号" width="55"> </el-table-column>
            <el-table-column prop="roleName" label="角色名称"> </el-table-column>
            <el-table-column prop="roleTypeName" label="角色类型"> </el-table-column>
            <el-table-column prop="createTime" label="创建时间"> </el-table-column>
            <el-table-column prop="updateTime" label="修改时间"> </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="removeRole(scope.row.id)"><i class="iconfont icon-shanchu icon_edit_style"></i> 删除</el-button>
                    <el-button type="text" size="small" @click="updateRole(scope.row)"><i class="iconfont icon-xiugai icon_edit_style"></i> 修改</el-button>
                    <el-button type="text" size="small" @click="authRole(scope.row.id)"><i class="iconfont icon-shouquan icon_edit_style"></i> 授权</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="right clear">
            <el-pagination
                    @size-change="onSizeChange"
                    @current-change="onFlipOver"
                    :current-page="pagination.currentPage"
                    :page-sizes="pagination.pageSizes"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>
        <DialogInput ref="addRoleDialog" title="新增角色">
            <div class="rem-dialog-con">
                <el-form :model="form" label-width="120px" size="small">
                    <el-form-item label="角色名称：">
                        <el-col :span="24">
                            <el-input v-model="form.roleName" type="text" placeholder="请输入角色名称"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="角色类型：">
                        <el-col :span="24">
                            <el-select v-model="form.roleType" placeholder="请选择" class="formSelect" value-key="value">
                                <el-option
                                        v-for="item in roleTypes"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="角色描述：">
                        <el-col :span="24">
                            <el-input
                                    type="textarea"
                                    :rows="3"
                                    v-model="form.description"
                                    placeholder="请输入角色描述">
                            </el-input>
                        </el-col>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="Remfooter" class="submit-btn">
                <el-button size="small" type="info" class="hpx-cancel-color dialog-button" @click="closeDialog()">取消</el-button>
                <el-button size="small" type="primary" class="dialog-button" @click="confirmAddRole()">确定</el-button>
            </span>
        </DialogInput>
        <DialogInput ref="editRoleDialog" title="修改角色">
            <div class="rem-dialog-con">
                <el-form :model="form" label-width="120px" size="small">
                    <el-form-item label="角色名称：">
                        <el-col :span="24">
                            <el-input v-model="form.roleName" type="text" placeholder="请输入角色名称"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="角色类型：">
                        <el-col :span="24">
                            <el-select v-model="form.roleType" placeholder="请选择" class="formSelect" value-key="value">
                                <el-option
                                        v-for="item in roleTypes"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="角色描述：">
                        <el-col :span="24">
                            <el-input
                                    type="textarea"
                                    :rows="3"
                                    v-model="form.description"
                                    placeholder="请输入角色描述">
                            </el-input>
                        </el-col>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="Remfooter" class="submit-btn">
                <el-button size="small" type="info" class="hpx-cancel-color dialog-button" @click="closeDialog()">取消</el-button>
                <el-button size="small" type="primary" class="dialog-button" @click="confirmEditRole()">修改</el-button>
            </span>
        </DialogInput>
        <AuthDialog ref="roleAuthDialog" :currentID="currentID" :checkedKeys="checkedKeys"/>
    </div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import Pagination from "@/types/Pagination";
    import DialogInput from '@component/common/DialogInput.vue';
    import AuthDialog from './AuthDialog'
    import { roleTypes } from '@/util/constantStatus'
    @Component({
        extends: Pagination,
        components: {
            DialogInput,
            AuthDialog
        }
    })
    export default class RoleManage extends Vue {
        form = {
            roleName: '',
            description: '',
            roleType: ''
        }
        currentID: string = ''
        checkedKeys = []
        roleTypes = roleTypes
        tableData = []
        async getRoleList () {
            let roleForm = {
                currentPage: this.pagination.currentPage,
                pageSize: this.pagination.pageSize,
            }
            let res = await this.$http.post('role/roles', roleForm)
            if (res.status = 200) {
                let { items, totalNum } = res.data;
                items.forEach((i) => {
                    if (i.createTime == null) {
                        i.createTime = '--'
                    }
                    if (i.updateTime == null) {
                        i.updateTime = '--'
                    }
                })
                this.tableData = items;
                this.pagination.total = totalNum;
            }
        }
        addRole () {
            this.$refs['addRoleDialog'].openDialog();
        }
        updateRole (data) {
            this.form.roleName = data.roleName;
            this.form.id = data.id;
            this.form.description = data.description;
            this.form.roleType = data.roleType;
            this.$refs['editRoleDialog'].openDialog();
        }
        authRole (currentID) {
            this.currentID = currentID;
            this.getRoleMenus(currentID);
            // this.$refs['roleAuthDialog'].showDialog();
        }
        removeRole (data) {
            this.$confirm('此操作将永久删除该角色，是否继续?','提醒',{
                confirmButtonText: '是',
                cancelButtonText: '否',
                customClass: 'custom-message-box',
                center: true
            }).then(() => {
                this.confirmDeleteRole(data);
            }).catch((err) => {
                console.log(err)
            })
        }
        async confirmAddRole () {
            if (this.form.roleName == '') {
                this.$alert('请输入角色名称！','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            if (this.form.roleType == '') {
                this.$alert('请选择角色类型！','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            let res = await this.$http.post('role/add', this.form)
            if (res.status == 200) {
                this.$refs['addRoleDialog'].closeDialog();
                this.getRoleList();
            }
        }
        async confirmEditRole () {
            if (this.form.roleName == '') {
                this.$alert('请输入角色名称！','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            if (this.form.roleType == '') {
                this.$alert('请选择角色类型！','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            let editRole = {
                id: this.form.id,
                roleName: this.form.roleName,
                roleType: this.form.roleType,
                description: this.form.description
            }
            let res = await this.$http.put('role/update', editRole)
            if (res.status == 200) {
                this.$refs['editRoleDialog'].closeDialog();
                this.getRoleList();
            }
        }
        async confirmDeleteRole (id: string|number) {
            let res = await this.$http.delete(`role/${id}`)
            if (res.status == 200) {
                this.getRoleList();
            }
        }
        // 获取角色下的菜单
        async getRoleMenus (roleId: string|number) {
            let res = await this.$http.get(`rolemenu/role/${roleId}/menus`)
            if (res.status == 200) {
                this.checkedKeys = res.data;
                this.$refs['roleAuthDialog'].showDialog();
            }
        }

        closeDialog () {
            this.$refs['addRoleDialog'].closeDialog();
            this.$refs['editRoleDialog'].closeDialog()
        }
        loadDataForPagination () {
            this.getRoleList()
        }
        mounted () {
            this.getRoleList()
        }
    }
</script>

<style scoped>

</style>